<template>
  <div>
    <el-table
      :data="tableData.filter(data => !search || data.classes.toLowerCase().includes(search.toLowerCase()))"
      style="width: 800px"
    >
      <el-table-column label="添加时间" prop="date"></el-table-column>
      <el-table-column label="课程名称" prop="classes"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column align="right">
        <template slot="header">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleAdd(scope.$index, scope.row)">加入购物车</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "ProductList",
  data() {
    return {
      tableData: [
        {
          id:1,
          date: "2016-05-02",
          classes: "Vue实战开发",
          price: "1200"
        },
        {
          id:2,
          date: "2016-05-04",
          classes: "React实战开发",
          price: "1500"
        },
        {
          id:3,
          date: "2016-05-01",
          classes: "web前端基础课程",
          price: "800"
        },
        {
          id:4,
          date: "2016-05-03",
          classes: "java实战开发",
          price: "1000"
        }
      ],
      search: "",
      shoppingList: [], // 用于购物车添加的数组，便于直接调用
      
    };
  },
  created() {
    this.getProductTableList();
    this.getshoppingCount();
    this.getShoppingList();
  },

  methods: {
    getProductTableList() {
      if (localStorage.getItem("productTableList")) {
        try {
          this.tableData = JSON.parse(localStorage.getItem("productTableList"));
        } catch (error) {
          console.log(error);
          localStorage.setItem(
            "productTableList",
            JSON.stringify(this.tableData)
          );
        }
      } else {
        localStorage.setItem(
          "productTableList",
          JSON.stringify(this.tableData)
        );
      }
    },

    getShoppingList() {
      if (localStorage.getItem("shoppingList")) {
        try {
          this.shoppingList = JSON.parse(localStorage.getItem("shoppingList"));
        } catch (error) {
          console.log(error);
          localStorage.setItem(
            "shoppingList",
            JSON.stringify(this.shoppingList)
          );
        }
      } else {
        localStorage.setItem("shoppingList", JSON.stringify(this.shoppingList));
      }
    },

    getshoppingCount() {
      this.$parent.shoppingCount = Number(
        JSON.parse(localStorage.getItem("shoppingCount"))
      );
    },

    handleAdd(index, row) {
      this.setShoppingList(index);
    },

    setShoppingList(index) {
      const list = this.tableData[index];
      let flag = true;
      let count = 0;
      list.quantity = 1;
      if(this.shoppingList.length === 0){
          list.allPrice = list.quantity * list.price;
          this.shoppingList.push(list);
          count = 1;
      }else{
          this.shoppingList.forEach( item =>{
            if(item.classes === list.classes){
              item.quantity++;
              flag = false;
            }
            count += item.quantity;
            item.allPrice = item.quantity * item.price;
          });
          if(flag){
            list.allPrice = list.quantity * list.price;
            this.shoppingList.push(list);
            count++;
          }
      }
      this.$parent.shoppingCount = count;
      localStorage.setItem("shoppingList",JSON.stringify(this.shoppingList));
      localStorage.setItem("shoppingCount",this.$parent.shoppingCount);
    }
  },

};
</script>

<style scope>
</style>